<template>
    <div class="app-container">
      <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
      >
        <el-form-item label="名称" prop="commonName">
          <el-input
              v-model="queryParams.commonName"
              placeholder="请输入名称"
              clearable
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="学名" prop="scientificName">
          <el-input
              v-model="queryParams.scientificName"
              placeholder="请输入学名"
              clearable
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
          >搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
  
      <el-table :data="plantList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="序号" align="center" prop="id"/>
        <el-table-column label="名称" align="center" prop="commonName"/>
        <el-table-column label="学名" align="center" prop="scientificName"/>
        <el-table-column
            label="生产日期"
            align="center"
            prop="dateAdded"
            width="180"
        >
          <template #default="scope">
            {{ scope.row.dateAdded }}
          </template>
        </el-table-column>
        <el-table-column
            label="最后更新时间"
            align="center"
            prop="lastUpdated"
            width="180"
        >
          <template #default="scope">
            {{ scope.row.lastUpdated }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            >查看详情
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            >驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
      />
  
      <el-drawer
          v-model="drawer"
          :title="title"
          :append-to-body="true"
          :modal-append-to-body="true"
          destroy-on-close="true"
          size="50%"
      >
        <el-collapse ref="form" :model="form" :rules="rules">
          <el-collapse-item title="植物信息" name="1">
            <el-form label-width="80px">
              <el-form-item label="名称">
                <el-input
                    v-model="form.plant.commonName"
                    placeholder="请输入植物名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="学名">
                <el-input
                    v-model="form.plant.scientificName"
                    placeholder="请输入学名"
                ></el-input>
              </el-form-item>
              <el-form-item label="科目名称">
                <div class="block">
                  <el-cascader
                      v-model="value"
                      :options="options"
                      :props="{ expandTrigger: 'hover' }"
                  ></el-cascader>
                </div>
              </el-form-item>
              <el-form-item label="描述">
                <el-input
                    type="textarea"
                    v-model="form.plant.description"
                    placeholder="请输入描述"
                ></el-input>
              </el-form-item>
              <el-form-item label="更新时间">
                <el-col :span="8">
                  <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.lastUpdated"
                      style="width: 90%"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="植物培育信息" name="2">
            <el-form-item label="繁殖季节">
              <el-input
                  v-model="form.plantBreed.floweringSeason"
                  placeholder="请输入季节：春季 夏季 秋季 冬季"
              ></el-input>
            </el-form-item>
            <el-form-item label="授粉方式">
              <el-input
                  type="textarea"
                  v-model="form.plantBreed.pollinationMethod"
                  placeholder="请输入授粉过程"
              ></el-input>
            </el-form-item>
            <el-form-item label="成熟描述">
              <el-input
                  type="textarea"
                  v-model="form.plantBreed.fruitingSeason"
                  placeholder="请输入成熟描述"
              ></el-input>
            </el-form-item>
            <el-form-item label="传播方式">
              <el-input
                  type="textarea"
                  v-model="form.plantBreed.seedDspersalMethod"
                  placeholder="请输入传播方式"
              ></el-input>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="植物生长信息" name="3">
            <el-form-item label="分布范围">
              <el-input
                  type="textarea"
                  v-model="form.plantEcotope.nativeRange"
                  placeholder="请输入分布范围"
              ></el-input>
            </el-form-item>
            <el-form-item label="生活环境">
              <el-input
                  type="textarea"
                  v-model="form.plantEcotope.habitat"
                  placeholder="请输入生活环境"
              ></el-input>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="植物生长特性" name="4">
            <el-form-item label="生长描述">
              <el-input
                  type="textarea"
                  v-model="form.des"
                  placeholder="请输入生长描述"
              ></el-input>
            </el-form-item>
            <el-form-item label="图片样式">
              <div class="demo-image__preview">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="srcList"
                    :initial-index="4"
                    fit="cover"
                />
              </div>
            </el-form-item>
          </el-collapse-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">立即通过</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-collapse>
      </el-drawer>
    </div>
  </template>
  
  <script>
  // import {delPlant, getPlant, listPlant, updatePlant} from "@/api/plantList";
  import {articleAll,articleOne,articlePass,articleDelete} from "@/api/article";
  import AlterDetails from "./AlterDetails.vue";
  import {dayjs, ElMessageBox} from "element-plus";
  
  export default {
    name: "ArticleReview",
    comments: {
      AlterDetails
    },
    data() {
      return {
        url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
        srcList: [
          "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
          "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
          "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
          "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
          "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"
        ],
        // 遮罩层
        loading: true,
        //
        title: "新增",
        drawer: false,
        adOpen: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // sad表格数据
        plantList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          commonName: "",
          scientificName: ""
        },
        // 表单参数
        form: {
          plant: {
            commonName: ""
          },
          plantBreed: {},
          plantEcotope: {}
        },
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询文章列表 */
      getList() {
        console.log("=======================,", this.drawer);
        // this.loading = true;
        articleAll(this.queryParams).then(response => {
          this.plantList = response.data;
          this.total = response.total;
        });
      },
      // 取消按钮
      cancel() {
        this.drawer = false;
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          commonName: null,
          scientificName: null,
          familyId: null,
          genusId: null,
          description: null,
          breedId: null,
          ectopeId: null,
          growthCharacteristicId: null,
          datasourceId: null,
          dateAdded: null,
          lastUpdated: null
        };
        // this.$refs['form'].resetFields();
        // debugger
        this.$refs.form.resetFields();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        (this.form = {
          plant: {
            commonName: ""
          },
          plantBreed: {},
          plantEcotope: {}
        }),
            (this.drawer = true);
        this.title = "添加";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        console.log("=======================,", this.drawer);
        const id = row.id || this.ids;
        articleOne(id).then(response => {
          this.drawer = true;
          this.form = response.data;
          console.log("=======================,", this.form);
          this.title = "修改";
        });
      },
      /** 提交按钮 */
      submitForm() {
        articlePass(this.form).then(response => {
          this.drawer = false;
          this.getList();
        });
        // } else {
        //     addPlant(this.form).then(response => {
        //         this.$modal.msgSuccess("新增成功");
        //         this.open = false;
        //         this.getList();
        //     });
        // }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        ElMessageBox.confirm("是否确认删除数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
            .then(function() {
              return articleDelete(ids);
            })
            .then(() => {
              this.getList();
              ElMessageBox.confirm("删除成功");
            });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
            "system/plant/export",
            {
              ...this.queryParams
            },
            `plant_${new Date().getTime()}.xlsx`
        );
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  .demo-image__error .image-slot {
    font-size: 30px;
  }
  
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  </style>
  